<template>
  <Breadcrumb />
  <!-- 表格 -->
  <el-table :data="userList" border style="width: 1500px; z-index: 1">
    <el-table-column prop="id" label="id" width="150" />
    <el-table-column prop="username" label="用户名" width="200" />
    <el-table-column label="头像" width="200px">
      <template #default="scope">
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.img_path"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :initial-index="4"
            fit="cover"
            z-index="1000"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="电话" width="220px" />
    <el-table-column prop="email" label="邮箱" width="220px" />
    <el-table-column prop="qq" label="QQ号" width="220px" />
    <el-table-column label="拉黑">
      <template #default="scope">
        <el-popconfirm
          :title="scope.row.status==1?'你确定要拉黑该用户?':'该用户已被拉黑！'"
          confirm-button-text="是"
          cancel-button-text="否"
          @confirm="confirmEvent(scope.row)"
          @cancel="cancelEvent"
        >
          <template #reference>
            <el-button size="small" type="danger">{{scope.row.status==1?'拉黑':'已拉黑'}}</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
import Breadcrumb from "../../components/bread/Breadcrumb.vue";
import { getUserListAPI,laHeiAPI } from "../../api/userlist";

onMounted(()=>{
  getUserListData()
})

const render = async () => {
  getUserListData()
};

const getUserListData = async () => {
  let res = await getUserListAPI();
  userList.value = Object.values(res.data.data);
  console.log(userList.value);
  
};

const userList = ref([]);

// 拉黑
const confirmEvent = async (row) => {
  //点击确定拉黑
  await laHeiAPI(row.id)
  render()
};
const cancelEvent = () => {
  //点击取消不拉黑
  console.log("cancel!");
};

</script>
<style scoped lang="less">
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>